<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script  src="/jquery-3.3.1.min.js"></script>


		<style>
			#leftName , #btn,#rightName{
				float: left;
				width: 100px;
				height: 300px;
			}
			#toRight,#toLeft{
				margin-top:100px ;
				margin-left:30px;
				width: 50px;
			}

			.border{
				height: 500px;
				padding: 100px;
			}

			div span:last-child {
				margin-left: 150px;
			}
		</style>



	</head>
	<body>

		<div class="border">
			<div>
				<span>未选择</span>
				<span>已选择</span>
			</div>
			<br>
			<select id="leftName" multiple="multiple">
				<option >西施</option>
				<option >貂蝉</option>
				<option >昭君</option>
				<option >大乔</option>
				<option >贵妃</option>
				<option >小乔</option>
			</select>
			<div id="btn">
				<input type="button" id="toRight" value="-->"><br>
				<input type="button" id="toLeft" value="<--">	
			</div>

			<select id="rightName" multiple="multiple">
				<option type="checkbox">如花</option>
			</select>

		</div>


	</body>
	
	<script>

		//需求：实现下拉列表选择条目左右选择功能
	
		$("#leftName").dblclick(function(){
					// let left = $("#leftName option:selected").html()
					// if(left != null){
					// 	$("#rightName").append("<option>" + left + "</option>")
					// 	$("#leftName option:selected").remove()
					// }
					$("#rightName").append($("#leftName option:selected"))


				});
				
				$("#rightName").dblclick(function(){
					// let left = $("#rightName option:selected").html()
					// if(left != null){
					// 	$("#leftName").append("<option>" + left + "</option>")
					// 	$("#rightName option:selected").remove()
					// }
					$("#leftName").append($("#rightName option:selected"))
				});
		
				
				$("#toRight").click(function(){
					$("#rightName").append($("#leftName option:selected"))
				});
	
				$("#toLeft").click(function(){
		
			
						$("#leftName").append($("#rightName option:selected"))
			
				
				});

	
	


	</script>

</html>
